<!-- 我的弹窗 -->

<template>
  <WebModal word="人员" small>
    <WebForm>
      <FormPhoto label="人员照片" bind="photoUrl" folder="face" half required />

      <FormInput label="人员名称" bind="name" :max="6" required />
      <FormRadio label="性别" bind="sex" :dict="CORE.DICT.GENDER" required />

      <FormSelect label="省份" bind="proviceCode, proviceName" :dict="provinceList" />
      <FormSelect label="城市" bind="cityCode, cityName" :dict="cityList" />
      <FormSelect label="区县" bind="areaCode, areaName" :dict="areaList" />

      <FormSelect label="证件类型" bind="certificateType" :dict="CORE.DICT.ID_TYPE" noClear />
      <FormIdNo label="证件号码" bind="certificateNumber" required />
    </WebForm>
  </WebModal>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MyModal',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb()],

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 省份列表
     */
    provinceList() {
      const list = CORE.DISTRICT.PROVINCE
      return list.map(([, name, code]) => [code, name])
    },

    /**
     * 城市列表
     */
    cityList() {
      const list = CORE.DISTRICT.CITY[this.one.proviceCode] || []
      return list.map(([, name, code]) => [code, name])
    },

    /**
     * 区县列表
     */
    areaList() {
      const list = CORE.DISTRICT.AREA[this.one.cityCode] || []
      return list.map(([, name, code]) => [code, name])
    },
  },
}
</script>
